<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2023-02-01 16:52:45
 * @LastEditors: chenju
 * @LastEditTime: 2023-02-01 17:26:50
-->
<template>
  <teleport to="body" :disabled="!appendToBody">
    <transition
      :name="ns.b('fade')"
      @after-enter="afterEnter"
      @after-leave="afterLeave"
      @before-leave="beforeLeave"
    >
      <el-overlay
        v-show="visible"
        :mask="modal"
        :overlay-class="modalClass"
        :z-index="zIndex"
        @click="onModalClick"
      >
        <div
          ref="drawerRef"
          aria-modal="true"
          v-bind="$attrs"
          :class="[ns.b(), direction, visible && 'open', customClass]"
          :style="isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize"
          role="dialog"
          @click.stop
        >
          <template v-if="rendered">
            <div :class="ns.e('body')">
              <slot />
            </div>
          </template>
        </div>
      </el-overlay>
    </transition>
  </teleport>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';

import { useDialog } from './use-dialog';
import { addUnit } from './utils';
import { useNamespace } from './hooks';
import { drawerEmits, drawerProps } from './drawer';
import { ElOverlay } from 'element-plus';

export default defineComponent({
  name: 'GDrawer',
  components: {
    ElOverlay
  },
  inheritAttrs: false,
  props: drawerProps,
  emits: drawerEmits,

  setup(props, { slots }) {
    const drawerRef = ref<HTMLElement>();
    const focusStartRef = ref<HTMLElement>();
    const ns = useNamespace('drawer');

    const isHorizontal = computed(() => props.direction === 'rtl' || props.direction === 'ltr');
    const drawerSize = computed(() => addUnit(props.size));

    return {
      ...useDialog(props, drawerRef),
      drawerRef,
      focusStartRef,
      isHorizontal,
      drawerSize,
      ns
    };
  }
});
</script>
